<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p><input type="text" v-model.lazy="name" value="博为峰"></p>
			<p>{{name}}</p>
			<p><input type="radio" name="sex" value="man" v-model="gender">男
				<input type="radio" name="sex" value="woman" v-model="gender">女
			</p>
			<p><input type="checkbox" name="hobby" value="HTML" v-model="hobby">HTML
				<input type="checkbox" name="hobby" value="CSS" v-model="hobby">CSS
				<input type="checkbox" name="hobby" value="JS" v-model="hobby">JS
			</p>
			<p><input type="text" v-model.number="age"></p>
			<p>{{age + 1}}</p>
			<p><textarea rows="10" cols="20" v-model.trim="desc"></textarea></p>
			<p>{{desc + '|'}}</p>
			<button @click="submit">提交</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					name: '张三',
					age: 0,
					gender: 'man',
					hobby: ['HTML', 'CSS'],
					desc: 'abc'
				},
				methods: {
					submit() {
						console.log(this.name, this.gender, this.hobby);
					}
				},
			})
		</script>
	</body>
</html>
